<template>
<!-- 商品详情页头部 -->
  <div class="product-detail-header">
    <!-- $router.go(-1)返回上一个路由 -->
    <i class="icon icon-zuojiantou" @click="$router.go(-1)"></i>
    <slot name="contents">
      <div class="content">
        <ul>
          <!-- 添加点击事件传入对应的index和active做对比来来达到切换的效果 -->
          <li :class="{active: active === 1}" @click="flag(1)">
            <i v-show="active === 1" class="icon icon-ditu-dibiao active"></i>
            <span>商品</span>
          </li>
          <li :class="{active: active === 2}" @click="flag(2)">
            <i v-show="active === 2" class="icon icon-ditu-dibiao active"></i>
            <span>商品详情</span>
          </li>
          <li :class="{active: active === 3}" @click="flag(3)">
            <i v-show="active === 3" class="icon icon-ditu-dibiao active"></i>
            <span>商品推荐</span>
          </li>
        </ul>
      </div>
    </slot>
    <i class="icon icon-qita"></i>
  </div>
</template>

<script>
export default {
  data(){
    return {
      active:1,
      srllTop:''
    }
  },
  methods: {
    flag(index){
      this.active = index
      this.$emit('productRoll',index)
    }
  },
};
</script>

<style lang="scss" scoped>
  .product-detail-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 88px;
    background-color: white;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;
    z-index: 1;
  }
  .icon {
    font-size: 50px;
    color: rgb(0, 0, 0);
  }
  .product-detail-header .content {
    width: 452px;
    color: #252525;
    font-size: 28px;
  }
  .icon-ditu-dibiao {
    font-size: 28px;
    margin-right: 8px;
  }
  ul{
    height: 88px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .product-detail-header ul .active{
    color: #f63515;
  }
</style>